<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="cn">
<head>
    <meta charset="utf-8"/>
    <title>炫空间登录</title>
    <link rel="stylesheet" href="css/login.css"/>
    <link rel="stylesheet" href="css/base.css"/>
</head>

<body>
<div id="bodybg">
    <img class="loginbg" src="images/loginbg.jpg"/>
    <div class="weatherbg"></div>
    <div class="weather">
        <span>北京</span><span class="weather-bid"><img class="weather-bid-img" src="images/weather1.png"/></span><span>晴</span><span>15℃-28℃</span>
    </div>
    <div class="xuan-login">
        <div class="xuan-register" id="xuan-register">
            <div class="register-head">
                <div class="register-h"></div>
            </div>
            <div class="register-con">
                <form name="register-form" id="register-form" method="post" action="login.html">
                    <div class="login-rcon-m"><span class="title">用户名:</span>
                        <input type="text" class="detail" name="register_name" id="register_name"/>
                        <span class="tips"></span>
                    </div>
                    <div class="login-rcon-m"><span class="title">密码:</span>
                        <input type="password" class="detail" id="register_pass" name="register_pass"/>
                        <span class="tips"></span>
                    </div>
                    <div class="login-rcon-m"><span class="title">确认密码:</span>
                        <input type="password" class="detail" id="register_pass1" name="register_pass1"/>
                        <span class="tips"></span>
                    </div>
                    <div class="login-rcon-m"><span class="title">E-mail:</span>
                        <input type="email" class="detail" name="register_email" id="register_email"/>
                        <span class="tips"></span>
                    </div>
                    <div class="login-rcon-m">
                        <input class="auto-input" type="checkbox" id="agree_input" value="1"/><label for="agree_input">我同意新华网</label>
                    </div>
                    <div class="login-rcon-m">
                        <input class="btn register-confirm" type="submit" value="立即注册"/>
                        <input class="btn register-cancel" type="reset" id="register-cancel" value="取消"/>
                    </div>
                </form>
            </div>
        </div>
        <div class="login-l" id="login-l">
            <div class="login-logo"></div>
            <p class="login-tips">如果您还没有新华社区通行证请您<a class="login-register" id="login-register" href="javascript:void(0);">立即注册</a></p>
        </div>
        <div class="login-r" id="login-r">
            <div class="login-rcon">
                <form name="login-form" id="login-form" method="post" action="login.htm">
                    <div class="login-rcon-h"></div>
                    <div class="login-rcon-m"><span class="title">账号</span>
                        <input type="text" class="detail account" name="user_name" id="user_name"/>
                        <a class="account-bid">用户名</a>
                    </div>
                    <div class="login-rcon-m"><span class="title">密码</span>
                        <input type="password" class="detail" name="pass" id="pass"/>
                    </div>
                    <div class="login-rcon-m"><span class="title">验证码</span>
                        <input type="text" class="detail identify-code" name="identify" id="identify"/>
                        <span class="identify-imgcon"><img class="identify-img" src="images/temp1.png"/></span>
                        <a class="identify-change">换一张</a>
                    </div>
                    <div class="login-rcon-m">
                        <span class="auto-panel">
                            <input class="auto-input" type="checkbox" id="auto-input" name="auto_input" value="1"/><label for="auto-input">自动登录</label>
                        </span>
                        <a class="find-password">忘记密码?</a>
                    </div>
                    <div class="login-rcon-m">
                        <input class="btn login-btn" type="submit" value="登录"/>
                        <a class="passer" id="passer" href="javascript:void(0);">注册新华网通行证</a>
                    </div>
                    <div class="cooperate">
                        <div class="cooperate-h">使用合作网站账号登录</div>
                        <div class="cooperate-bid">
                            <ul>
                                <li><a><img src="images/login-qq.png"/></a></li>
                                <li><a><img src="images/login-sina.png"/></a></li>
                                <li><a><img src="images/login-163.png"/></a></li>
                                <li><a><img src="images/login-souhu.png"/></a></li>
                            </ul>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="login-news">
    <div class="news-show">
        <div class="news-title">斯诺登未登机赴古巴飞机载大批记者起飞</div>
        <div class="news-refresh"><a class=" refresh"></a><span class="publish-time">3分钟前</span></div>
    </div>
    <div class="news-show">
        <div class="news-title">斯诺登未登机赴古巴飞机载大批记者起飞</div>
        <div class="news-refresh"><a class=" refresh"></a><span class="publish-time">3分钟前</span></div>
    </div>
    <div class="news-show">
        <div class="news-title">斯诺登未登机赴古巴飞机载大批记者起飞</div>
        <div class="news-refresh"><a class=" refresh"></a><span class="publish-time">3分钟前</span></div>
    </div>
</div>
<script type="text/javascript">
    
    (function ($) {
        var reg = $("xuan-register"),
                toReg1 = $("login-register"),
                toReg2 = $("passer"),
                cancel = $("register-cancel");

        toReg1.onclick = toReg2.onclick = function() {
            reg.style.display = "block";
            $("register_name").focus();
        };

        cancel.onclick = function(){
            reg.style.display = "none";
            $("user_name").focus();
        };

        $("login-form").valid({
            "user_name":{ t:"用户名需要填写!" },
            "pass":{ t:"密码需要填写!" },
            "identify":{ t:"验证码需要填写!" }
        },function(o){
            this.valid = function(){
                if( !this.value ){
                    alert( o.t );
                    return false;
                }return true;
            };
        });

        $("register-form").valid({
            "register_name":{ defaultTip:"输入一个账号英文和数字组成6-26位。", reg:/^[\d\w]{6,26}$/},
            "register_pass":{ defaultTip:"密码6到16个字符，区分大小写。", reg:/^.{6,16}$/},
            "register_pass1":{ defaultTip:"再次输入你设置的密码。", equalTo:"register_pass", equalTip:"两次输入密码不一致。"},
            "register_email":{ defaultTip:"填写邮箱用于召回密码等服务。", reg:/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/ },
            "agree_input":{ wornTip:"需要同意新华网协议才能注册。" }
        },function(o){
            if(o.defaultTip){       
                var next = this.nextSibling.nextSibling;    //空白字符产生TextNode
                next.innerHTML = o.defaultTip;
                this.onfocus = function(){ 
                    next.innerHTML = o.defaultTip; 
                    next.className = "tips";
                };
                this.valid = this.onblur = function(){
                    var isOK = true;
                    if( o.reg ){ 
                        isOK = o.reg.test(this.value);
                    }
                    if( o.equalTo ){  
                        isOK = ($(o.equalTo).value === this.value);
                    }
                    next.className = isOK ? "tips ok" : "tips err";
                    next.innerHTML = isOK ? "&nbsp;" : o.equalTip || o.defaultTip;
                    return isOK;
                };
            }
            if( o.wornTip ){
                this.valid = function(){
                    this.checked || alert( o.wornTip );
                    return !!this.checked;
                }
            }
        });



    })(function (id) {
        var p = document.getElementById(id);
        if( p.tagName.toUpperCase() == 'FORM' ){
            p.valid = function(valids,exec){
                exec = exec || new Function();
                for(k in valids){
                    var o = valids[k];
                    var d = document.getElementById(k);
                    exec.call(d,o);
                }
                p.onsubmit = function(){
                    for(k in valids){
                        if(document.getElementById(k).valid() === false){
                            return false;
                        }
                    }
                };
            };

        }
        return p;
    });
</script>
</body>
</html>
